uni-page-body {
	height: 100%;
}
.period-container {
	height: 100%;
	padding-top: 50rpx;
		&:before {
			content: '';
			display: table;
		}
		
		.period-container-box {
			height: calc(100% - 148rpx);
			overflow-y: scroll;
		}

		.padd-auto {
			padding: 0 30rpx;
		}

		.menu-box {
			height: 32rpx;
			align-items: center;
			margin-bottom: 48rpx;

			.image {
				height: 32rpx;
			}

			.menu-image {
				display: flex;
				height: 32rpx;
				align-items: center;
				font-size: 32rpx;

				.image {
					margin-right: 30rpx;
				}
			}
		}

		.price-box {
			font-size: 24rpx;
			color: rgba(255, 255, 255, .54);

			.left-box {
				&>text {
					font-size: 58rpx;
					height: 58rpx;
					line-height: 58rpx;
				}

				&>view {
					margin-top: 30rpx;
					height: 24rpx;
					line-height: 24rpx;

					.white-text {
						margin-right: 30rpx;
					}
				}
			}

			.right-box {
				width: 186rpx;
				height: 106rpx;
				flex-direction: column;

				&>view {
					height: 24rpx;
					line-height: 24rpx;
				}
			}
		}

		.k-line-charts {
			height: 60rpx;
			align-items: center;
			position: relative;
			color: rgba(255, 255, 255, .4);
			border-top: 1px solid rgba(255, 255, 255, .1);
			margin-top: 60rpx;

			p.line {
				position: absolute;
				bottom: 0;
				height: 4rpx;
				width: 40rpx;
			}
		}

		.k-line-container {
			height: 460rpx;
		}

		.k-line-value {
			height: 88rpx;
			align-items: center;
			font-size: 28rpx;
		}

		.empty {
			height: 20rpx;
		}

		.data-container {
			padding: 52rpx 30rpx 20rpx;
			color: rgba(255, 255, 255, .4);
			font-size: 24rpx;

			.data-tabs {
				position: relative;
				// height: 32rpx;
				font-size: 32rpx;
				padding-bottom: 26rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				&>view {
					height: 32rpx;
					line-height: 32rpx;
				}

				.line {
					width: 80rpx;
					height: 4rpx;
					position: absolute;
					bottom: 0;
				}

			}

			.data-title {
				margin: 32rpx 0 54rpx;
				display: flex;

				&>text {
					display: inline-block;
					width: 20%;
					text-align: center;

					&:first-child {
						text-align: left;
					}

					&:last-child {
						text-align: right;
					}
				}
			}

			.data-list {
				color: #fff;
				font-size: 24rpx;
				margin-bottom: 54rpx;

				&:last-child {
					margin-bottom: 22rpx;
				}

				&>text {
					display: inline-block;
					width: 20%;
					text-align: center;

					&:first-child {
						text-align: left;
					}

					&:last-child {
						text-align: right;
					}
				}
			}

		}

		.data-btn {
			padding: 30rpx;
			background-color: #2e3653;
			// position: fixed;
			// bottom: 100rpx;
			width: 100%;

			.btn {
				width: 336rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 16rpx;
				color: #fff;

				&.fall {
					background-color: #c64a5d;
				}

				&.rise {
					background-color: #11caa1;
				}
			}
		}

		.left-container {
			height: 100%;
			padding-top: 94rpx;

			.left-top {
				margin: 0 0 56rpx;

				.white-text {
					font-size: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
				}

				.image {
					height: 36rpx;
				}
			}

			.left-list {
				align-items: center;
				color: rgba(255, 255, 255, .54);
				height: 120rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);
				font-size: 24rpx;

				.white-text {
					margin-right: 6rpx;
				}

				.bold {
					font-size: 32rpx;
				}
			}

		}

		.bottom-container {
			height: 100%;
			color: rgba(255, 255, 255, .54);
			font-size: 28rpx;


			.bottom-top {
				height: 88rpx;
				align-items: center;
				padding: 0 30rpx;
				border-bottom: 1px solid rgba(255, 255, 255, .1);

				.dis-between {
					width: calc(100% - 180rpx);
				}
			}

			.bottom-time {
				justify-content: flex-end;
				margin: 30rpx 0 60rpx;
				font-size: 24rpx;
			}

			.container {

				.bold {
					font-size: 30rpx;
				}

				.dis-between {
					align-items: center;
					margin-bottom: 60rpx;

					&.right {
						justify-content: flex-end;

						&>.btn {
							background-color: #21273F;
							margin-bottom: 0;

							.min-btn {
								width: 100rpx;
								text-align: center;
								background-color: rgba(255, 255, 255, .1);
								border-radius: 16rpx;
							}
						}
					}
				}

				.btn {
					font-size: 30rpx;
					width: 424rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: rgba(255, 255, 255, .1);
					border-radius: 16rpx;
				}
				
				.expected {
					font-size: 24rpx;
				}
			}
		}

		.line-empty {
			height: 1px;
			background-color: rgba(255, 255, 255, .1);
			margin: 60rpx 0 20rpx;
		}
		.period-empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}